<template>
    <transition name="fade" mode="out-in">
        <img v-if="preview" class="mmv-image" :style="style" :src="preview" @click.prevent @touchstart.prevent>
    </transition>
</template>

<script>

export default {
    name: 'MmvImage',
    props: ['src'],
    data() {
        return {
            width: 0,
            preview: null,
        };
    },
    computed: {
        style() {
            const multiple = this.$store.state.app.width / 640;
            return {
                width: this.width * multiple + 'px',
            };
        },
    },
    mounted() {
        this.handleLoadImage();
    },
    methods: {
        handleLoadImage() {
            const image = new Image();
            image.onload = () => {
                this.width = image.width;
                this.preview = image.src;
            };
            image.src = this.$imageSrcFormatter(this.src);
        },
    },
};
</script>

<style lang="scss" scoped>
.mmv-image {
    user-select: none;
    pointer-events: none;
}
</style>
